<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { App3D } from '../lib/App3D';
import audioEffect from '../lib/AudioEffect';
import MusicNoteIcon from '../components/MusicNoteIcon.svelte';
import MusicNoteOffIcon from '../components/MusicNoteOffIcon.svelte';

let app3d: App3D | null = null;
let canvas: HTMLCanvasElement;
let showButton = true;
let isMuted = false;

function handleResize() {
  if (app3d && canvas) {
    app3d.resize(canvas.clientWidth, canvas.clientHeight);
  }
}

function startAudio() {
  audioEffect.play({ url: "/black.mp3", force: true });
  showButton = false;
}

function toggleMute() {
  isMuted = !isMuted;
  audioEffect.setMuted(isMuted);
}

onMount(() => {
  canvas = document.getElementById('webgl') as HTMLCanvasElement;
  if (canvas) {
    app3d = new App3D(canvas);
    app3d.start();
    window.addEventListener('resize', handleResize);
    handleResize();

  }
});

onDestroy(() => {
  if (app3d) {
    app3d.stop();
    app3d = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<svelte:head>
	<title>3 DREAMS OF BLACK</title>
	<meta name="description" content="Svelte demo app" />
</svelte:head>

<div class="sky-container">
  <canvas id="webgl"></canvas>

	<div class="overlay">
		<div class="title">ROME</div>
		<div class="subtitle">
			"3 DREAMS OF BLACK"
		</div>
		<div class="description">
			AN INTERACTIVE FILM BY CHRISMILK
		</div>

		{#if showButton}
		<button class="button" on:click={startAudio}>
			BEGIN
		</button>
		{/if}

		<img src="/images/logo.png" alt="logo" class="logo">
	</div>


	{#if !showButton}
	<div class="sound-control">
		<button class="sound-btn" on:click={toggleMute} aria-label={isMuted ? 'Unmute' : 'Mute'}>
			{#if isMuted}
				<MusicNoteOffIcon />
			{:else}
				<MusicNoteIcon spinning={true} />
			{/if}
		</button>
	</div>
	{/if}
</div>


<style>
.sky-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #002d5e 0%, #2573c7 50%,  #ffffff 100%);
}

#webgl {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: transparent;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

.overlay .title {
  font-size: 60px;
  font-family: 'Times New Roman', Times, serif;
}

.overlay .subtitle {
  font-size: 24px;
}

.overlay .description {
  font-size: 14px;
  margin-bottom: 20px;
}

.overlay .button {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 10px 40px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 20px;
}

.overlay .logo {
  width: 360px;
}

.sound-control {
  position: absolute;
  top: 30px;
  right: 30px;
}
.sound-btn {
  background: rgba(0,0,0,0.3);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
	color: #fff;
}
.sound-btn:hover {
  background: rgba(0,0,0,0.5);
}
</style>
